<template>
    <view>
        <view class="back_box" :style="{'padding-top':isanzhuo?'0px':(height+'px')}">
            <view class="back_text" style="display: flex;flex-direction: column;justify-content: center;width: 100%;">
                <view style="font-size: 21px;color: #000;line-height: 30px;"> {{ title }}</view>
            </view>
        </view>
    </view>
</template>
<script>
export default {
    props: {
        title     : {
            type   : String,
            default: "",
        },
        subheading: {
            type   : String,
            default: "",
        },
        titlesub  : {
            type   : String,
            default: "",
        },
        showView  : {
            type   : Boolean,
            default: true,
        },
        active    : {
            type   : String,
            default: "1",
        },
    },
    data() {
        return {
            height: '',
            isanzhuo:false
        }
    },
    created() {
        this.gettopheight()
    },
    methods: {
        gettopheight() {
            const nav = navigator.userAgent
            if (nav.indexOf('Android') > -1 || nav.indexOf('Adr') > -1) {
                this.isanzhuo = true
                let res = phone.getTopHeight()
                console.log("====datas", res)
                let datas = JSON.parse(res)
                console.log("====datas", datas)
                localStorage.setItem('height', datas.height)
                this.height = datas.height-12
            } else if (nav.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
                this.isanzhuo = false
                setTimeout(() => {
                    this.$bridge.callhandler('getTopHeight', {}, res => {
                        let datas = res
                        localStorage.setItem('height', datas.height)
                        this.height = datas.height-6
                    })
                })
            }
        }
    },
};
</script>
<style scoped>
.back_box {
    background: rgb(248, 248, 248) !important;
    width: 100vw;
    height: 13.33vw;
    line-height: 13.33vw;
    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: space-between;
    position: fixed;
    top: 0;
    z-index: 99;
}

.back_btn {
    width: 20vw;
    margin: 1.33vw 0 0 3vw;
    /* position: absolute; */
    /* left: 5.3vw; */
    /* top: 2.3vw; */
}

.back_btn img {
    width: 2.9vw;
    height: 5.8vw;
}

.back_text {
    font-size: 4.8vw;
    text-align: center;
    font-weight: bold;
    /* position: absolute; */
    /* right: 44vw; */
}

.back_text1 {
    font-size: 4.8vw;
    float: right;
    margin-right: 3vw;
    width: 18vw;
}

.flex_box {
    display: flex;
    width: 100%;
    justify-content: space-around;
}

.active {
    color: #f40c28;
}
</style>
